<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<!--
    表单
    <form></form>
        action="#": '#'占位符 表示提交给当前页面
        method="": 请求方法
    <input></input>
    普通文本,密文:
        readonly: 单值属性 表示只读
        type="text": type表示设置输入的内容的格式 此为普通文本格式
        type="password": 表示输入的是密码格式的密文
        name="": 表示该文本框的名称 - 数据传输时的映射字段
        placeholder="": 占位内容 在用户输入内容时会消失
        value="": 表示默认显示的内容(该内容有意义),可修改
    选择按钮:
        type="radio": 表示格式为单选按钮
        type="checkbox": 表示格式为多选按钮
        value="": 表示该按钮传输时的显示 若不规定默认显示'on'
    日期:
        type="date"
    颜色:
        type="color"
    文件:
        type="file" 原则是没有大小限制的 可以传输文件或图片等等
    按钮:
        type="button" 表示此为普通按钮 可与指定业务链接以实现指定功能
-->
<form action="#" method="post">
    用户名: <input type="text" name="username" placeholder="请输入用户名" value="Tom">
    密码: <input type="password" name="password" placeholder="请输入密码">
    <br>
    性别: <input type="radio" name="gender" value="man">男
         <input type="radio" name="gender" value="woman">女
    <br>
    爱好: <input type="checkbox" name="like" value="cy">抽烟
         <input type="checkbox" name="like" value="hj">喝酒
         <input type="checkbox" name="like" value="tt">烫头
         <input type="checkbox" name="like" value="java">学java
    <br>
    生日: <input type="date" name="birthday" value="birthday">
    <br>
    幸运色: <input type="color" name="lucky">
    <br>
    头像: <input type="file" name="filename">
    <br>
    <input type="checkbox" id="yes">
    <label for="yes">请同意此协议</label>
    <br>
    <!--按钮的第一种表示方式-->
    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
    <input type="button" value="普通按钮">
    <br>
    <!--
        按钮的第二种表示方式
        此表达方式也能将用户输入的内容上传至服务端
        结合JS代码 将指定行为绑定到上述及此处button标签上可完成多种复杂事件
    -->
    <button>普通按钮</button>
    <br>
    <!--
        下拉选择框
        selected: 单值属性 默认为含有该属性的城市
    -->
    <select name="city">
        <option value="sd" selected>山东</option>
        <option value="bj">北京</option>
        <option value="gz">上海</option>
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
    </select>
</form>
<hr>
<!--练习-->
<h1>欢迎注册</h1>
<form action="#">
<table border="1" style="border-collapse: collapse">
    <tr>
        <td>用户名</td>
        <td>
            <input type="text" name="username" placeholder="请输入用户名">
        </td>
    </tr>
    <tr>
        <td>密码</td>
        <td>
            <input type="password" name="password" placeholder="请输入密码">
        </td>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="gender" value="m">男
            <input type="radio" name="gender" value="w">女
        </td>
    </tr>
    <tr>
        <td>爱好</td>
        <td>
            <input type="checkbox" name="hobby" value="cy">抽烟
            <input type="checkbox" name="hobby" value="hj">喝酒
            <input type="checkbox" name="hobby" value="tt">烫头
        </td>
    </tr>
    <tr>
        <td>邮箱</td>
        <td>
            <input type="email" name="email" placeholder="请输入邮箱">
        </td>
    </tr>
    <tr>
        <td>生日</td>
        <td>
            <input type="date" name="birthday">
        </td>
    </tr>
    <tr>
        <td>靓照</td>
        <td>
            <input type="file" name="picture">
        </td>
    </tr>
    <tr>
        <td>所在地</td>
        <td>
            <select name="city">
                <option value="sd" selected>山东</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="注册">
        </td>
    </tr>
</table>
</form>
</body>
</html>